<template>
  <div>
    <el-menu
      class="el-menu-vertical-demo"
      :default-active="menuDefaultActive" 
      @open="handleOpen" 
      @close="handleClose" 
      :collapse="isCollapse"
      @select="handleSelect"
      active-text-color="orange"
    > 
      <template v-for="(menu, index) in menuList">
        <el-submenu 
          v-if="menu.children && menu.children.length" 
          :index="menu.index" 
          :disabled="menu.disabled"
          :key="`el-submenu-${index}`"
        >
          <template slot="title">
            <i :class="menu.icon"></i>
            <span slot="title">{{ menu.title }}</span>
          </template>
          <template v-for="(childMenu, childIndex) in menu.children">
            <el-menu-item-group 
              v-if="childMenu.items && childMenu.items.length"
              :key="`child-el-menu-item-group-${childIndex}`"
            >
              <span slot="title">{{ childMenu.title }}</span>
              <el-menu-item 
                v-for="(item, itemIndex) in childMenu.items" :key="itemIndex" 
                :index="item.index"
              >{{ item.title }}</el-menu-item>
            </el-menu-item-group>
            <el-submenu 
              v-else-if="childMenu.children && childMenu.children.length" 
              :index="childMenu.index"
              :key="`child-el-submenu-${childIndex}`"
            >
              <span slot="title">{{ childMenu.title }}</span>
              <el-menu-item 
                v-for="(item, itemIndex) in childMenu.children" :key="itemIndex" 
                :index="item.index"
              >{{ item.title }}</el-menu-item>
            </el-submenu>
          </template>
        </el-submenu>
        <el-menu-item 
          v-else 
          :index="menu.index" 
          :disabled="menu.disabled"
          :key="`el-menu-item-${index}`"
        >
          <i :class="menu.icon"></i>
          <span slot="title">{{ menu.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import Page_1_0 from "./pages/page_1_0";
import Page_2_0 from "./pages/page_2_0";
import Page_98_1 from "./pages/page_98_1";
import Page_99_1 from "./pages/page_99_1";
export default {
  name: "JQKitMenu",
  components: {
    Page_1_0,
    Page_98_1,
    Page_99_1
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      menuDefaultActive: "1-0",
      menuList: [
        {
          index: "1",
          title: "ECharts",
          icon: "el-icon-pie-chart",
          children: [
            {
              title: "二次封装使用手册",
              items: [
                { index: "1-0", title: "概览 & 说明", component: Page_1_0 },
              ]
            },
            {
              index: "1-1",
              title: "示例",
              children: [
                { index: "1-1-1", title: "折线图" },
                { index: "1-1-2", title: "柱状图" },
                { index: "1-1-3", title: "饼图" },
                { index: "1-1-4", title: "地理坐标/地图" },
                { index: "1-1-5", title: "雷达图" },
                { index: "1-1-6", title: "漏斗图" },
                { index: "1-1-7", title: "仪表盘" },
              ]
            }
          ]
        },
        {
          index: "2",
          title: "RelationGraph",
          icon: "el-icon-share",
          children: [],
          component: Page_2_0
        },
        {
          index: "3",
          title: "百度地图",
          icon: "el-icon-map-location",
          disabled: true,
          children: []
        },
        {
          index: "98",
          title: "其他",
          icon: "el-icon-collection",
          children: [
            {
              title: "",
              items: [
                { index: "98-1", title: "iframe 父子页面通信", component: Page_98_1 },
              ]
            },
          ]
        },
        {
          index: "99",
          title: "设置",
          icon: "el-icon-setting",
          children: [],
          component: Page_99_1
        }
      ],
      menuDict: {},
      selectedMenu: null
    }
  },
  created() {
    this.setMenuDict();
    this.setSelectedMenuData();
  },
  methods: {
    setMenuDict() {
      this.menuList.forEach(menu => {
        this.menuDict[menu.index] = menu;
        menu.children.forEach(childMenu => {
          if (childMenu.index) {
            this.menuDict[childMenu.index] = childMenu;
            if (childMenu.children && childMenu.children.length) {
               childMenu.children.forEach(grandchild => {
                this.menuDict[grandchild.index] = grandchild;
              })
            }
          } else {
            if (childMenu.items && childMenu.items.length) {
              childMenu.items.forEach(item => {
                this.menuDict[item.index] = item;
              })
            }
          }
        })
      });
    },
    setSelectedMenuData(menuKey=this.menuDefaultActive) {
      const menu = this.menuDict[menuKey];
      if (menu) {
        this.selectedMenu = menu;
      } else {
        this.selectedMenu = null;
        console.warn("数据源设置错误！");
      }
      this.$emit('handleSelectAction', this.selectedMenu);
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      const menuKey = keyPath[keyPath.length - 1];
      this.setSelectedMenuData(menuKey);
    }
  }
}
</script>

<style scoped lang="scss">
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>